<template>
 <div class="ShoppingMall">
    <div class="search-bar">
      <van-row gutter="5">
        <van-col span="3">
          <i class="iconfont icon-ditu" @click="clickMapIcon" />
        </van-col>
        <van-col span="16">
          <input type="text" class="search-input" placeholder="查找" @input="changeSearchVal" />
        </van-col>
        <van-col span="5"><van-button size="mini" @click="handleSearch" :disabled="!searchVal">搜索</van-button></van-col>
      </van-row>
    </div>
    <van-notice-bar
      text="江南皮革厂倒闭了，老板带着小姨了跑了，全场29元！29元你买不了吃亏，买不了上当！先到先选，量大从优！"
      left-icon="http://cs-static-assets.oss-cn-beijing.aliyuncs.com/ds_system/laba.png"
    />
   <!-- 轮播图 -->
  <SwipeText :swipeData="bannerPicArray" />
  <!-- 分类 -->
  <div class="type-bar">
    <div v-for="(item, index) in category" :key="index" @click="clickCategoryList(item.mallCategoryId)">
      <img v-lazy="item.image" alt="类型图片" width="90%" />
      <span>{{ item.mallCategoryName }}</span>
    </div>
  </div>
  <!-- 广告条 -->
  <div>
    <img v-lazy="adBanner" alt="广告条" width="100%" />
  </div>
  <!-- 商品推荐区域 -->
  <div class="recommend-area">
    <div class="recommend-title">商品推荐</div>
    <div class="recommend-body">
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="(item, index) in recommendGoods" :key="index">
          <div class="recommend-item" @click="handleDetail(item.goodsId)">
            <!-- 这里不需要懒加载 -->
            <img :src="item.image" alt="推荐图片" width="80%" />
            <div>{{ item.goodsName.slice(0, -3) }}</div>
            <div>¥{{ item.price | moneyFilter }}(¥{{ item.mallPrice | moneyFilter}})</div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
  <FloorComponent :floorData="floor1" :floorTitle="floorName.floor1" />
  <FloorComponent :floorData="floor2" :floorTitle="floorName.floor2" />
  <FloorComponent :floorData="floor3" :floorTitle="floorName.floor3" />
  <!-- 热卖模块 -->
  <HotGoods :hotGoodsData="hotGoods" />
 </div>
</template>

<script>
// 按需加载
import axios from "axios";
// 推荐区域的轮播插件
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import FloorComponent from "../component/FloorComponent";
import SwipeText from "../component/SwipeText";
import HotGoods from "../component/HotGoods";
import requestUrl from "../../serverApi";
import toMoney from "../../filter/moneyFilter";
import Bus from "../../bus";

export default {
  data() {
    return {
      bannerPicArray: [],
      category: [],
      adBanner: "",
      recommendGoods: [],
      // swiper的配置参数
      swiperOption: {
        slidesPerView: 3
      },
      floor1: [],
      floorName: {},
      floor2: [],
      floor3: [],
      // 热卖商品
      hotGoods: [],
      searchVal: '',
    };
  },
  components: {
    swiper,
    swiperSlide,
    SwipeText,
    FloorComponent,
    HotGoods
  },
  methods: {
    clickMapIcon() {
      this.$router.push({ name: "Map" });
    },
    clickCategoryList(mallCategoryId) {
      this.$router.push({
        name: "CategoryList",
        query: { categoryId: mallCategoryId }
      });
    },
    handleDetail(goodsId) {
      this.$router.push({ name: "GoodsDetail", query: { goodsId: goodsId } });
    },
    changeSearchVal(e) {
      this.searchVal = e.target.value;
    },
    handleSearch() {
      this.$router.push({
        name: 'SearchGoods',
        query: {searchVal: encodeURIComponent(this.searchVal)},
      });
    },
  },
  created() {
    axios
      .get(requestUrl.homeUrl)
      .then(res => {
        if (res.status === 200) {
          const { data = {} } = res.data;
          this.bannerPicArray = data.slides;
          this.category = data.category;
          this.adBanner = data.advertesPicture.PICTURE_ADDRESS;
          this.recommendGoods = data.recommend;
          this.floor1 = data.floor1;
          this.floorName = data.floorName;
          this.floor2 = data.floor2;
          this.floor3 = data.floor3;
          this.hotGoods = data.hotGoods;
        }
      })
      .catch(err => {
        // 异常捕获
        console.log(err);
      });
  },
  filters: {
    // filters可以定义一些工具类方法，在模板的DOM中使用
    // 定义filters进行过滤数据，filters里面的函数的传递参数名称的写法形式是：params | moneyFilter
    moneyFilter(money) {
      // return返回显示的数据
      return toMoney(money);
    }
  }
};
</script>

<style scoped>
.van-row {
  margin: 0 !important;
}
.van-button {
  margin-left: 0.3rem;
}
.search-bar {
  height: 2.2rem;
  line-height: 2.2rem;
  background-color: #e5017d;
  overflow: hidden;
}
.search-input {
  width: 100%;
  height: 1.3rem;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1px solid #fff !important;
  background-color: #e5017d;
  color: #fff;
}
.search-input::placeholder {
  color: lightgray;
}
.icon-ditu {
  display: inline-block;
  color: white;
  font-size: 20px;
}
.type-bar {
  background-color: white;
  margin: 0 0.3rem 0.3rem;
  border-radius: 0.3rem;
  /* 字体不用使用rem, 不用坐适配 */
  font-size: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.type-bar > div {
  flex: 1;
  padding: 0.3rem;
  font-size: 12px;
  text-align: center;
}
.recommend-area {
  background-color: #fff;
  margin-top: 0.3rem;
}
.recommend-title {
  border-bottom: 1px solid #eee;
  font-size: 14px;
  padding: 0.2rem;
  color: #e5017d;
}
.recommend-body {
  border-bottom: 1px solid #eee;
}
.recommend-item {
  width: 99%;
  border-right: 1px solid #eee;
  font-size: 12px;
  text-align: center;
}
</style>